<template>
  <a-row :gutter="24">
    <a-col :md="9" :sm="24" style="padding: 0 0 0 0;">
      <a-card :bordered="false">
        <s-table ref="table" :columns="tableShowColumns" :data="tableData" :alert="true"
          :rowKey="(record) => record.name" :showPagination="false" :customRow="rowClick">
          <template slot="operator" v-if="hasPerm('table:add')">
            <a-button @click="$refs.addTableForm.add()" icon="plus" type="primary" v-if="hasPerm('table:add')">新增数据表
            </a-button>
          </template>
          <span slot="action" slot-scope="text, record">
            <a v-if="hasPerm('table:edit')" @click.stop="$refs.editTableForm.edit(record)">编辑</a>
            <a-divider type="vertical" v-if="hasPerm('table:delete')" />
            <a-popconfirm v-if="hasPerm('table:delete')" placement="topRight" title="确认删除？" @confirm="() => tableDelete(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </s-table>
        <add-table-form ref="addTableForm" @ok="tableHandleOk" />
        <edit-table-form ref="editTableForm" @ok="tableHandleOk" />
      </a-card>
    </a-col>
    <a-col :md="15" :sm="24">
      <a-card :bordered="false">
        <s-table ref="table" :columns="columnShowColumns" :data="columnInfo" :alert="true"
          :rowKey="(record) => record.dbColumnName" :showPagination="false">
          <template slot="operator" v-if="hasPerm('table:add')">
            <a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('column:add6')">新增数据列
            </a-button>
          </template>
          <span slot="action" slot-scope="text, record">
            <a v-if="hasPerm('column:edit')" @click="$refs.editForm.edit(record)">编辑</a>
            <a-divider type="vertical" v-if="hasPerm('column:delete')" />
            <a-popconfirm v-if="hasPerm('column:delete')" placement="topRight" title="确认删除？" @confirm="() => columnDelete(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
          </s-table>
          
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
  import {
    STable
  } from '@/components'
  import {
    getTableInfoList,
    getColumnInfoList,
    tableDelete,
    columnDelete
  } from '@/api/modular/gen/databaseManage'
  import addTableForm from './addTableForm.vue'
  import editTableForm from './editTableForm.vue'
  export default {
    components: {
      STable,
      addTableForm,
      editTableForm
    },
    data() {
      return {
        tableLoading: false,
        columnLoading: false,
        queryParam: {},
        tableShowColumns: [{
            title: '表名',
            dataIndex: 'name'
          },
          {
            title: '描述',
            dataIndex: 'description'
          }
        ],
        columnShowColumns: [{
          title: '字段名',
          dataIndex: 'dbColumnName'
        }, {
          title: '描述',
          dataIndex: 'columnDescription'
        }, {
          title: '是否是主键',
          dataIndex: 'isPrimarykey',
          scopedSlots: {
            customRender: 'isPrimarykey'
          }
        }, {
          title: '是否自增',
          dataIndex: 'isIdentity',
          scopedSlots: {
            customRender: 'isIdentity'
          }
        }, {
          title: '类型',
          dataIndex: 'dataType'
        }],
        columnInfo: parameter => {
          return getColumnInfoList(this.queryParam).then((res) => {
            return res.data
          })
        },
        tableData: parameter => {
          return getTableInfoList(Object.assign(parameter)).then((res) => {
            return res.data
          })
        },
        rowClick: (record, index) => ({
          on: {
            click: () => {
              this.queryParam = {
                'tableName': record.name
              }
              this.$refs.table.refresh(true)
            },
          },
        })
      };
    },
    created() {
      if (this.hasPerm('table:edit') || this.hasPerm('table:delete')) {
        this.tableShowColumns.push({
          title: '操作',
          width: '200px',
          dataIndex: 'action',
          scopedSlots: {
            customRender: 'action'
          }
        })
      }
      if (this.hasPerm('column:edit') || this.hasPerm('column:delete')) {
        this.columnShowColumns.push({
          title: '操作',
          width: '200px',
          dataIndex: 'action',
          scopedSlots: {
            customRender: 'action'
          }
        })
      }
    },
    methods:{
      tableHandleOk () {
        this.$refs.table.refresh()
      },
      tableDelete (record) {
        tableDelete(record).then((res) => {
          if (res.success) {
            this.$message.success('删除成功')
            this.$refs.table.refresh()
          } else {
            this.$message.error('删除失败') // + res.message
          }
        })
      }
    }
  };
</script>
<style></style>
